<style scoped>
.circular {
	display: block;
	margin: 0 auto;
}
</style>

<template>
	<svg class="circular" :style="{width: width + 'px', height: width + 'px'}">
		<circle :stroke-dasharray="strokeDasharray" :stroke-dashoffset="strokeOffset" :cx="radio" :cy="radio" :r="r" fill="none" :stroke="strokeColor" :stroke-width="strokeWidth" stroke-linecap="round">
			<animate attributeName="stroke-dasharray" :values="dasharrayValues" :dur="duration" fill="freeze" repeatCount="indefinite"  />
			<animate attributeName="stroke-dashoffset" :values="dashoffsetValues" :dur="duration" fill="freeze" repeatCount="indefinite" />
			<animateTransform attributeName="transform" type="rotate" :from="rotateFrom" :to="rotateTo" :dur="duration" repeatCount="indefinite"/>
		</circle>
	</svg>
</template>

<script>
	export default {
		name: 'loading',

		props: {
			r: {
				type: Number,
				required: true
			},
			strokeWidth: {
				type: Number,
				required: true
			},
			strokeColor: {
				type: String,
				default: '#00B2F8'
			},
			time: {
				type: Number,
				default: 2
			}
		},

		computed: {
			width() {
				return (this.r + this.strokeWidth) * 2
			},
			perimeter() {
				return Math.PI * this.r * 2
			},
			radio() {
				return this.width / 2
			},
			rotateFrom() {
				return `0 ${this.radio} ${this.radio}`
			},
			rotateTo() {
				return `360 ${this.radio} ${this.radio}`
			},
			dasharrayValues() {
				return `1, ${this.perimeter};${this.perimeter - this.radio}, ${this.perimeter};${this.perimeter - this.radio}, ${this.perimeter}`
			},
			dashoffsetValues() {
				return `0;-${this.radio};-${this.perimeter}`
			},
			duration() {
				return `${this.time}s`
			},
			strokeDasharray() {
				return `0 ${this.perimeter}`
			},
			strokeOffset() {
				return `-${this.perimeter}`
			}
		}
	}
</script>